<template>
	<leo-drag-list @touchTheTop="touchTheTop" @touchTheBottom="touchTheBottom" ref="leoDraglistRef" @getListApi="getListApi">
		<template #top>
			顶部
		</template>
		<!-- <template #left>
			left
		</template>
		<template #right>
			right
		</template> -->
		
		<!-- #ifdef MP-WEIXIN -->
		<template #content={data}>
			****--{{data}}--****
			<!-- <leo-drag :swapMode="true":list="data">
				<template #content={data}>
					<view class="drop flex flex-y flex-1">
						<view v-if="data.name % 2 === 0" class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
							<view class="ellipsis flex-1" style="text-align: center;">
								-高度1-
							</view>
						</view>
						<view v-if="data.name % 8 === 0" class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
							<view class="ellipsis flex-1" style="text-align: center;">
								-高度2-
							</view>
						</view>
						<view class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
							<view class="ellipsis flex-1" style="text-align: center;">
								n:{{data.name}} ;y:{{data.y}} -- {{data.index === data.activeIndex}}
							</view>
							<uni-icons class="flex-none" @touchstart="changeDisabled(data.index)" style="margin-left: auto;" type="bars" size="30"></uni-icons>
						</view>
					</view>
				</template>
			</leo-drag> -->
		</template>
		<!-- #endif -->
		
		
		<!-- #ifndef MP-WEIXIN -->
		<template #content={data}>
			<view class="drop flex flex-y flex-1">
				<view v-if="data.name % 2 === 0" class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
					<view class="ellipsis flex-1" style="text-align: center;">
						-高度1-
					</view>
				</view>
				<view v-if="data.name % 8 === 0" class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
					<view class="ellipsis flex-1" style="text-align: center;">
						-高度2-
					</view>
				</view>
				<view class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
					<view class="ellipsis flex-1" style="text-align: center;">
						n:{{data.name}} ;y:{{data.y}} -- {{data.index === data.activeIndex}}
					</view>
					<uni-icons class="flex-none" @touchstart="changeDisabled(data.index)" style="margin-left: auto;" type="bars" size="30"></uni-icons>
				</view>
			</view>
		</template>
		<!-- #endif -->
		<template #bottom>
			底部
		</template>
	</leo-drag-list>
</template>

<script setup>
	import { ref } from 'vue';
	const leoDraglistRef = ref(null);
	
	function touchTheTop(){
		console.log("到顶")
	}
	
	function touchTheBottom(){
		console.log("到底")
	}
	
	function changeDisabled(i){
		// 触发拖拽
		leoDraglistRef.value.handleLongpress(i);
	}
	function getListApi({dataList,callback}){
		// 模拟api请求 --- 需要传递请求回来的列表和总条数
		setTimeout(()=>{
			let lists = [];
			for (var i = dataList.length; i < dataList.length+10; i++) {
				lists.push({name:i})
			}
			callback(lists, 300);	// 和complete用法一致, 第二参数需要传递数据库的总数量
		},200)
	}
</script>

<style>
	.flex{
		display: flex;
	}
	.flex-1{
		flex: 1;
	}
	.flex-center-center{
		justify-content: center;
		align-items: center;
	}
	.flex-center{
		align-items: center;
	}
	.flex-y{
		flex-direction: column;
	}
	.flex-none{
		flex: none;
	}
	.drop{
		padding: 10rpx;
	}
</style>
